<!doctype html>
<html lang="en">
<head>
    <title>Splitter - Overview</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="Create resizable panels in your apps without using any resizing code. Customize the look with CSS, mouse over styles and images. " />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />

    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    
    <link href="../../themes/wijmo/jquery.wijmo.wijsplitter.css" rel="stylesheet" type="text/css" />
    <script src="../../external/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijutil.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijsplitter.js" type="text/javascript"></script>
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#vsplitter1").wijsplitter({ orientation: "vertical" });
            $("#vsplitter2").wijsplitter({ orientation: "vertical", collapsingPanel: "panel2" });
            $("#hsplitter1").wijsplitter({ orientation: "horizontal" });
            $("#hsplitter2").wijsplitter({ orientation: "horizontal", collapsingPanel: "panel2" });

        });
    </script>
    <style type="text/css">
        .splitterContainer
        {
            height: 210px;
        }
        
        #vsplitter1, #hsplitter1, #vsplitter2, #hsplitter2
        {
            width: 200px;
            height: 200px;
        }
        
        
        .layout
        {
            float: left;
        }
    </style>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Overview</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <div class="splitterContainer">
                <div class="layout">
                    <h3>
                        Vertical</h3>
                    <h4>
                        Collapsing Panel: panel1</h4>
                    <div id="vsplitter1">
                        <div>
                            panel1
                        </div>
                        <div>
                            panel2
                        </div>
                    </div>
                    <h4>
                        Collapsing Panel: panel2</h4>
                    <div id="vsplitter2">
                        <div>
                            panel1
                        </div>
                        <div>
                            panel2
                        </div>
                    </div>
                </div>
                <div class="layout" style="width: 100px;">
                    &nbsp;</div>
                <div class="layout">
                    <h3>
                        Horizontal</h3>
                    <h4>
                        Collapsing Panel: panel1</h4>
                    <div id="hsplitter1">
                        <div>
                            panel1
                        </div>
                        <div>
                            panel2
                        </div>
                    </div>
                    <h4>
                        Collapsing Panel: panel2</h4>
                    <div id="hsplitter2">
                        <div>
                            panel1
                        </div>
                        <div>
                            panel2
                        </div>
                    </div>
                </div>
            </div>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>
                Create a professional and polished website with the help of the wijsplitter widget.
                wijsplitter is a container widget featuring a movable and collapsible bar that divides
                a container's display area into two resizable panels. Splitters are able to be nested
                indefinitely, providing you infinite possibilities in UI design. The samples in
                this section will help to get you started with the wijsplitter widget.
            </p>
        </div>
    </div>
</body>
</html>
